/*
	This file contents javascript code for tutorial.
	Author		: Brother Rain
	Website		: http://phanmemtot.blogspot.com
	Last Update	: Jul 10, 2013
*/

/*
 * 	Structure of a tutorial
 * 	- Intro
 *  - Steps
 *  ---- title
 *  ---- content
 *  ---- (want) image, aciton, caution, info ...
 */
function show(){
    var content = "";
    content += getImage();
	content += getIntro();
	content += getSteps()
	$('.tutorial-show').addClass('span10 offset1')
	$('.tutorial-show').append(content);
}

function getImage(){
	result = '<div class="separator" style="margin: 30px 0px; clear: both; text-align: center;">';
	result += sprintf('<a href="%s" imageanchor="1" style="margin-left: 1em; margin-right: 1em;">', thisTutorial.image);
	result += sprintf('<img border="0" height="202" width="320" src="%s">', thisTutorial.image);
	result += '</a>';
	result += '</div>';
	return result;
}
function getIntro(){
	result = sprintf('<div class="alert alert-info">%(intro)s</div>', thisTutorial); 
	return result;
}
function getSteps(){
	result = "";
	result += '<div class="tabbable" style="margin-bottom: 18px;">'
	
	result += '<ul class="nav nav-tabs">'
	for (var i=0; i<thisTutorial.steps.length; i++){
		result += sprintf('<li class=""><a href="#step%d" data-toggle="tab">%d</a></li>', i+1, i+1); 
	}
	result += '</ul>' // /nav-tabs
		
	result += '<div class="tab-content" style="padding-bottom: 9px; border-bottom: 1px solid #ddd;">';
	for (var i=0; i<thisTutorial.steps.length; i++){
		if(i==0){
			active = "active";
		}
		else{
			active = ""
		}
		result += sprintf('<div class="tab-pane %s" id="step%d">', active, (i+1));
		/*
		 * Title
		 * */
		result += sprintf('<h4>%s</h4>', thisTutorial.steps[i].title);
		/*
		 * Title
		 * */
		result += sprintf('<p>%s</p>', thisTutorial.steps[i].content);
		result += '</div>' // tab-pane 
	}
	result += '</div>' // tab-content
	
	return result;
}
show();